<template>
	<view class="wrapper">
		<u-sticky bgColor="#fff">
			<u-tabs keyName="title" :list="tabList" active-color="#f8d246" :current="current"
				@change="tabsChange"></u-tabs>
		</u-sticky>
		<view class="component-wrapper">
			<!-- <people v-if="componentName == 'people'" /> -->
			<wallpaper v-if="componentName == 'wallpaper'" />
			<!-- <image-edit v-if="componentName == 'image'" /> -->
		</view>
		<tabbar cur="play"></tabbar>
	</view>
</template>

<script>
	import people from './people.vue'
	import wallpaper from './wallpaper.vue'
	import imageEdit from './image.vue'
	export default {
		components: {
			people,
			wallpaper,
			imageEdit
		},
		data() {
			return {
				cur: 'play',
				current: '0',
				tabList: [
					// {
					// 	title: '小人举牌',
					// 	name: 'people'
					// },
					{
						title: '随机壁纸',
						name: 'wallpaper'
					},
					// {
					// 	title: '图片操作',
					// 	name: 'image'
					// }
				],
				fileList: [],
				componentName: 'wallpaper'
			}
		},
		methods: {
			onTabbarChange(idx) {
				uni.switchTab({
					url: `/pages/${idx}/${idx}`
				})
			},
			tabsChange(item) {
				this.componentName = item.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		.component-wrapper {
			width: 90%;
			margin: 20px auto;
		}
	}
</style>